<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<header style="padding: 5px">
		<form>
		<input type="text" name="q">
		<button>关键词</button>
		</form>
	</header>

	<div class="point" open-button status="1" for="#list">收起列表<span class="status">-</span></div>
	<div id="list" class="list" style="border:1px solid #ececec;">
		<ul>
			{foreach $list as $item}
			<li>
				<div class="title point" open-button for=".content" status="0">
				{$item['title']}
				</div>
				<div class="description">
					
					{$item['description']}
					<div class="content" style="display: none">
						<br>
						<?php
						echo htmlspecialchars_decode($item['content']);
						?>
						<br><br>
					</div>
				</div>
				
				<?php
					$keys = explode(',',$item['keywords']);
				?>
				<div class="keywords">
				{foreach $keys as $key}
					<a class="label" href="/knowledge?q={$key}">{$key}</a>,
				{/foreach}
				</div>
			</li>
			{/foreach}
		</ul>
	</div>

	<div class="point" open-button status="0" for="#footer">添加数据<span class="status">+</span></div>
	<footer id="footer" style="display: none">
	<form id="form-knowledge">
		标题：<br>
		<input type="text" name="title"><br>
		关键词：<br>
		<input type="text" name="keywords"><br>
		描述：<br>
		<input type="text" name="description"><br>
		内容：<br>
		<textarea name="content"></textarea><br>
		<button type="button" onclick="formpost(this)" form="form-knowledge">提交</button>
	</form>
	</footer>
	<script type="text/javascript">
		
	</script>
	<style type="text/css">
	ul{
		margin: 0;
	    padding: 0;
	    list-style: none;
	}
	li{
	    display: inline-block;
	    padding: 5px;
	    border: #8BC34A 1px solid;
	    margin: 5px;
	    max-width: 200px;
	    font-size: 16px;
	}
	li.active{
	    display: block;
	    padding: 5px;
	    border: #8BC34A 1px solid;
	    margin: 5px;
	    max-width: none;
	    font-size: 16px;
	}
	div.title,div.description{
		border-bottom: #ccc 1px dotted;
	}
	div.title{
	    background: #3a3a3a;
	    color: #fff;
	    text-align: center;
	}
	a{
		text-decoration: none;
    	color: #666;
	}
	span.btn{
		font-size: 12px;
		border: #ccc 1px solid;
	    padding: 1px 4px;
	    border-radius: 10%;
	    background: #999e92;
	    color: #fff;
	    cursor: pointer;
	}
	.point{
		cursor: pointer;
	}
	.label{
		background: #000;
		color: #fff;
	}
	</style>
	<script src="/component/jquery.min.js"></script>
	<script type="text/javascript">
		$('*[open-button]').click(function(){
			var open = $(this).attr('status');
			var _for = $(this).attr('for');
			if(open=='0')
			{
				$(this).parent().addClass('active');
				open = 1;
				$(this).attr('status',open);
				$(this).find('.status').html('-');
				$(this).parent().find(_for).show();
			}
			else
			{
				open = 0;
				$(this).parent().removeClass('active');
				$(this).attr('status',open);
				$(this).find('.status').html('+');
				$(this).parent().find(_for).hide();
			}
			
		})
		function formpost(obj){
			var form = '#'+$(obj).attr('form');
			var data = $(form).serialize();

			$.post('/knowledge/create',data,function(res){
				console.log(res);
			})
			return false;
		}
	</script>
</body>
</html>